<script setup>

import { formatDateTime } from '@/utils/formatDate.js'

const map = new Map([
    ['订单过期', 1],
    ['待支付订金', 2],
    ['订单进行中', 3],
    ['待支付尾款', 4],
    ['订单完成', 5]
])

const props = defineProps({
    order: {
        type: Object,
        default: () => { }
    }
})

const goPay = () => {
    // ElMessage({
    //     message: '即将前往支付...',
    //     type: 'success'
    // })

    sessionStorage.setItem('orderId', props.order.orderId)
    window.open('./pay', '_blank')

}

</script>
<template>
    <div class="order-item">
        <div class="status">
            <p class="desc">订单Id：{{ order.orderId }}</p>
            <el-steps style="max-width: 80%" :active="map.get(order.status)">
                <el-step title="Step 1" description="订单已过期" />
                <el-step title="Step 2" description="待支付定金" />
                <el-step title="Step 3" description="订单进行中" />
                <el-step title="Step 4" description="待支付尾款" />
                <el-step title="Step 5" description="订单已完成" />
            </el-steps>
        </div>
        <div class="middle">
            <div class="top">定金：{{ order.deposit }}</div>
            <div class="bottom">需付尾款：{{ order.finalPayment }}</div>
        </div>
        <div class="b">
            <div class="time">
                发布时间：{{ formatDateTime(order.timestamp) }}
            </div>
            <div class="btn">
                <el-button v-if="map.get(order.status) === 2 || map.get(order.status) === 4" round type="primary"
                    size="small" @click="goPay">去支付</el-button>
            </div>
        </div>
    </div>
</template>
<style scoped lang='scss'>
.order-item {
    width: 60rem;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;

    .status {
        font-size: 1.4rem;
        font-weight: 700;
        color: #333;
        margin: 10px 0;

        .desc {
            margin-bottom: 10px;
        }
    }

    .middle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 50px;

        .top {
            font-size: 1.3rem;
            color: #666;
        }

        .bottom {
            font-size: 1.2rem;
            color: #666;
        }
    }

    .b {
        display: flex;
        justify-content: space-between;

        .time {
            font-size: 1.2rem;
            color: #666;
        }

        .btn {
            margin-right: 1rem;
        }
    }
}
</style>